<template>
  <!-- 雷达图  图表必须给高和宽度-->
  <div ref="myDiv" class="radar-echart" />
</template>

<script>
// 完成加载过程
// var echarts = require('echarts')
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/radar') // 引入雷达图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

require('echarts/lib/component/legend')

export default {
  props: {
    item: {
      type: Array,
      required: true
    }
  },
  // 页面渲染完毕事件
  mounted() {
    const myChart = echarts.init(this.$refs.myDiv) // 得到图表实例
    const radar = this.item.map((item) => {
      return { text: item.text, max: 100 }
    })
    const datas = this.item.map((item) => {
      return {
        value: item.value,
        name: item.text,
        itemStyle: {
          normal: {
            color: item.color
          }
        }
      }
    })
    myChart.setOption({
      // backgroundColor: '#cfc6d1',
      radar: [
        {
          indicator: radar,
          splitArea: {
            show: true,
            areaStyle: {
              color: ['#cfc6d1']
              // 图表背景网格的颜色
            },
            lineStyle: {
              width: 1,
              color: ['#fff']
              // 图表背景网格线的颜色
            }
          },
          radius: 55,
          center: ['50%', '50%']
        }
      ],
      series: [
        {
          type: 'radar',
          tooltip: {
            trigger: 'item'
          },
          areaStyle: {},
          data: datas
        }
      ]
    })
  }
}
</script>

<style>
.radar-echart {
  width: 300px;
  height: 200%;
  padding: 10px;
}
</style>
